<!DOCTYPE html>
<html>
<head>
    <title>WebRTC视频播放</title>
    <style>
        video {
            width: 640px;
            height: 480px;
            border: 1px solid #ccc;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>WebRTC视频播放器</h1>
    <button id="playButton">播放视频</button>
    <video id="videoElement" autoplay playsinline></video>

    <script>
        const playButton = document.getElementById('playButton');
        const videoElement = document.getElementById('videoElement');
        let pc = null;

        playButton.addEventListener('click', async () => {
            playButton.disabled = true;
            
            // 创建WebRTC连接
            pc = new RTCPeerConnection({
                iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
            });

            // 处理远程视频流
            pc.ontrack = (event) => {
                if (event.track.kind === 'video') {
                    videoElement.srcObject = new MediaStream([event.track]);
                }
            };

            // 连接到WebSocket
            const ws = new WebSocket('ws://' + window.location.host + '/ws');
            
            // 这里需要添加信令交换逻辑
            // 实际实现中需要处理offer/answer/candidate交换
        });
    </script>
</body>
</html>